<template>
    <div class="type-row f f-ac f-js f-w" :class="{ border: border }" :style="{
      marginTop: top + 'px',
    }">
        <div v-for="(i, k) in list" :key="k" class="myBtn" :class="{
        active: keyValue == '' ? current == k : current == i[keyValue],
      }" :style="{
        fontSize: size + 'px',
        marginRight: columnGap + 'px',
        marginBottom: rowGap + 'px',
      }" @click="handleClick(i, k)">
            {{ i[keyLabel] }}
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            // 按钮列表
            list: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            // 选中
            current: {
                type: [String, Number],
                default: 0,
            },
            // 显示字段
            keyLabel: {
                type: String,
                default: "name",
            },
            // 字段取值
            keyValue: {
                type: String,
                default: "",
            },
            // 距离顶部位置
            top: {
                type: [Number, String],
                default: 0,
            },
            // 列间隔
            columnGap: {
                type: [Number, String],
                default: 60,
            },
            // 行间隔
            rowGap: {
                type: [Number, String],
                default: 20,
            },
            // 宽度
            width: {
                type: [Number, String],
                default: 103,
            },
            // 字体大小
            size: {
                type: [Number, String],
                default: 16,
            },
            // 下划线
            border: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {};
        },
        methods: {
            // 点击事件
            handleClick(row, index) {
                this.$emit("click", {
                    index,
                    ...row,
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .type-row {
        width: 100%;

    }

    .myBtn {
        font-weight: 600;
        user-select: none;
        height: 28px;
        line-height: 28px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 0 20px;
        text-align: center;
        z-index: 9;
        background-image: url("../../assets/line-gray.png");
        color: #909090;

        &:hover {
            background-color: #e7e7e7;
            cursor: pointer;
        }

        &:active {
            background-color: #e0e0e0;
        }
    }

    .border {
        border-bottom: 1px solid rgba(217, 217, 217, 0.5);
    }

    .active {
        background-image: url("../../assets/line-blue.png");
        color: #193980;

        &:hover {
            background-color: #7796d9;
            cursor: pointer;
            color: #fff;
        }

        &:active {
            background-color: #6e89c4;
        }
    }
</style>